<template>

    <!-- 返回 -->
    <van-nav-bar title="选择售后类型" left-text="返回" left-arrow @click-left="back" />
    
    <div class="content">
   
        <van-card :desc="order.code" title="点击查看详情" :thumb="product.info.cover_cdn" @click="Toid(order.id)"
            v-if="order.status=='3'" style="background-color: #fff;">
            <template #price>
                <span style="display:inline-block;padding-right: 1rem;">{{order.total}}元</span>
                <span style="display:inline-block;">{{order.status_text}}</span>
            </template>
        </van-card>

        <!--退货退款 -->
     
        <div class="back" @click="BackAll(order.id)">
            <van-cell-group>
                <van-cell value="内容" label="">
                    <van-icon name="arrow" />
                    <template #title>
                        <div>
                            <van-icon name="info-o" style="color: orangered; font-size: 1rem; padding-right: .5rem;" />
                            <span>我要退款退货</span>
                        </div>
                    </template>

                    <template #label>
                        <div>
                            <span style="padding-left:1.4rem;">已收到货，或与商家协商之后申请</span>
                        </div>
                    </template>
                </van-cell>

            </van-cell-group>
        </div>

        <!--退款不退货 -->
        <div class="money" @click="BackMoney(order.id)">
            <van-cell-group>
                <van-cell value="内容" label="">
                    <van-icon name="arrow" />
                    <template #title>
                        <div>
                            <van-icon name="gold-coin-o"
                                style="color: orange; font-size: 1rem; padding-right: .5rem;" />
                            <span>我要退款(不退货)</span>
                        </div>
                    </template>

                    <template #label>
                        <div>
                            <span style="padding-left:1.4rem;">已收到货，或与商家协商之后申请</span>
                        </div>
                    </template>
                </van-cell>

            </van-cell-group>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'OrderBack',
        created() {

            // 接收id
            this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0
            this.OrderBack()
        },
        data() {
            return {
                orderid: 0,
                LoginUser: this.$cookies.get('LoginUser'),
                product: [],
                order: []
            }
        },

        methods: {
            back() {
                this.$router.go(-1)
            },

            async OrderBack() {
                // 组转数据
                var data = {
                    orderid: this.orderid,
                    userid: this.LoginUser['id'],
                }
                // 调接口
                var result = await this.$api.OrderBack(data);
               
                this.order = result.data['0']

                this.product = result.data['1']
              
            },

            Toid(orderid) {
                this.$router.push({
                    path: '/user/order/express',
                    query: {
                        orderid: orderid,
                    }
                })

            },

            // 退货退款
            BackAll(orderid) {
                this.$router.push({
                    path: '/user/order/backall',
                    query: {
                        orderid: orderid,
                    }
                })
            },
            BackMoney(orderid)
            {
                this.$router.push({
                    path:'/user/order/backmoney',
                    query:{
                        orderid:orderid,
                    }
                })
            }
        },
    }
</script>
<style>
    .van-cell__label {
        width: 120% !important;

    }

    .content {
        background-color: rgb(241, 240, 240);
    }

    .back {
        margin-top: 1rem !important;


    }
</style>